<template>
  <div class="user">
    <div class="user_top flex">
      <div class="user_top_l">
        <img class="user_top_l_img" :src="info.img" alt="">
        <div class="user_top_l_star">
          <i v-bind:class="[info.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i v-bind:class="[info.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i v-bind:class="[info.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i v-bind:class="[info.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i v-bind:class="[info.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
        </div>
      </div>
      <div class="user_top_m">
        <div class="user_top_m_top">{{info.name}}</div>
        <div class="user_top_m_state" v-if="info.status == 0">休息<span v-if="info.isshow == 0">(无法接单)</span></div>
        <div class="user_top_m_state" v-if="info.status == 1">工作<span v-if="info.isshow == 0">(无法接单)</span></div>
        <div class="user_top_m_eg">ID号码：{{info.eg}}</div>
      </div>
      <div class="user_top_r">
        <p class="user_top_r_score">综合评分：{{info.score}}分</p>
        <!-- <p class="user_top_r_grade">当前等级：三级</p> -->
        <p class="user_top_r_car">服务过：{{info.carnum}}辆</p>
      </div>
    </div>
    <!-- 今日统计 -->
    <div class="user_count">
      <p class="user_count_tit">今日统计</p>
      <ul class="user_count_main flex">
        <li>
          <p class="user_count_number">{{info.TodayOrderNum}}</p>
          <p class="user_count_subtit">预约订单</p>
        </li>
        <li>
          <p class="user_count_number">{{info.TodayOrderNum_complete}}</p>
          <p class="user_count_subtit">已完成</p>
        </li>
        <li>
          <p class="user_count_number user_count_numberAll">{{info.Today_money}}</p>
          <p class="user_count_subtit">总收入</p>
        </li>
      </ul>
    </div>
    <!-- 我的收入 -->
    <div class="user_income">
      <div class="user_income_tit flex">
        <p>我的收入</p>
        <button @click="toIncome">收支明细</button>
      </div>
      <div class="user_income_main flex">
        <ul class="user_income_info flex">
          <li>
            <p class="user_income_subtit">昨日收入</p>
            <p class="user_income_number">{{info.YesterDay_money}}</p>
          </li>
          <li>
            <p class="user_income_subtit">本月收入</p>
            <p class="user_income_number">{{info.month_money}}</p>
          </li>
          <li>
            <p class="user_income_subtit">总收入</p>
            <p class="user_income_number">{{info.money}}</p>
          </li>
          <li>
            <p class="user_income_subtit">可提现</p>
            <p class="user_income_number">{{info.TiXian}}</p>
          </li>
        </ul>
        <button class="user_income_withdraw" @click="toWithDraw">提现</button>
      </div>
    </div>
    <!-- list内容 -->
    <ul class="user_list">
      <li class="flex" @click="modifyState">
        <div class="user_list_l">当前状态</div>
        <div class="user_list_r">
          <span v-if="info.status == 0">休息</span>
          <span v-if="info.status == 1">工作</span>
          <i class="iconfont icon-arrowright"></i>
        </div>
      </li>
      <!-- <li class="flex">
        <div class="user_list_l">工作时间</div>
        <div class="user_list_r">
          周一至周五 08:00-18：00
          <i class="iconfont icon-arrowright"></i>
        </div>
      </li> -->
      <li class="flex" @click="toEvaluate">
        <div class="user_list_l">客户评价</div>
        <div class="user_list_r">
          <i class="iconfont icon-arrowright"></i>
        </div>
      </li>
      <!-- <li class="flex">
        <div class="user_list_l">我的订单</div>
        <div>
          <i class="iconfont icon-arrowright"></i>
        </div>
      </li> -->
      <li class="flex">
        <div class="user_list_l"> 
          <a style="color: #595757;text-decoration:blink;" href="tel:0510-87830003">联系客服</a>
        </div>
        <div class="user_list_r">
          <a style="color: #595757;text-decoration:blink;" href="tel:0510-87830003">
            <i class="iconfont icon-arrowright"></i>
          </a>
        </div>
      </li>
      <li class="flex" @click="toService">
        <div class="user_list_l">服务标准</div>
        <div>
          <i class="iconfont icon-arrowright"></i>
        </div>
      </li>


      <li class="flex" @click="toNotice">
        <div class="user_list_l">企业公告</div>
        <div class="user_list_r">
          <span  style="color: red">{{info.articletime}}</span>
       
          <i class="iconfont icon-arrowright"></i>
        </div>
      </li>
    </ul>
    <!-- 底部导航 -->
    <div class="tab">
      <ul class="tab_main flex">
        <li class="tab_li" @click="toIndex">
          <div>
            <i class="iconfont icontab icon-home2"></i>
          </div>
          <p>首页</p>
        </li>
        <li class="tab_li" @click="toOrdering">
          <div>
            <i class="iconfont icontab icon-time1"></i>
          </div>
          <p>进行中</p>
        </li>
        <li class="tab_li active" @click="toUser">
          <div>
            <i class="iconfont icontab icon-wode2"></i>
          </div>
          <p>我的</p>
        </li>
      </ul>
    </div>
    <!-- 更新经纬度 -->
    <lat-lng></lat-lng>
  </div>
</template>




<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'user',
  data () {
    return {
      info: {},
    }
  },
  mounted(){
    this.getInfo();
    this.$root.washShare();
  },
  methods: {
    toData(){
      this.$router.push({path:'/washdata'})
    },
    toIncome(){
      this.$router.push({path:'/washincome'})
    },
    toWithDraw(){
      global.order.worker.wallet = this.info.TiXian;
      this.$router.push({path:'/washwithdraw'})
    },
    toEvaluate(){
      this.$router.push({path:'/washevaluate'})
    },
    toIndex(){
      this.$router.push({path:'/wash'})
    },
    toOrdering(){
      this.$router.push({path:'/washordering'})
    },
    toUser(){
      this.$router.push({path:'/washuser'})
    },
    toService(){
      this.$router.push({path:'/washservice'})
    },
    toNotice(){
      this.$router.push({path:'/washnotice'})
    },
    // 获取信息
    getInfo(){
      var that = this;
      axios.get(global.api.order.worker.own,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("getInfo then");
        console.log(res);
        if (res.data.code == 0) {
          that.info = res.data.data
        }else{
           that.$root.refrshUuid();
        }

      })
      .catch(function(res){
        console.log("getInfo catch");
        console.log(res);
      }) 
    },
    // 修改工作状态
    modifyState(){
      var that = this;
      axios.get(global.api.index.state,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          uid: that.info.uid,
        }
      })
      .then(function(res){
        console.log("modifyState then");
        console.log(res);
        if (res.data.code == 0) {
          alert("状态修改成功");
          that.info.status = that.info.status == 0 ?1:0
        
        }
      })
      .catch(function(res){
        console.log(res);
      }) 
    },
  },
}
</script>




<style scoped>
  .user{

  }
  /* 头部 */
  .user_top{
    padding: 1.5rem 0.5rem 0.8rem;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .user_top_l{
    width: 4rem;
    margin-right: 4%;
  }
  .user_top_l_img{
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.2rem;
    border-radius: 50%;
  }
  .user_top_l_star{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .star{
    color: #2ecc80;
    font-size: 0.8rem;
  }
  .user_top_m{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .user_top_m_top{
    font-weight: bold;
    text-align: left;
  }
  .user_top_m_name{
    margin-right: 1rem;
  }
  .user_top_m_score{

  }
  .user_top_m_state{
    text-align: left;
    font-size: 0.9rem;
    padding: 0.3rem 0;
    color: #595757;
  }
  .user_top_m_state span {
    color: red;
    font-size: 0.75rem;
  }
  .user_top_m_eg{
    text-align: left;
    font-size: 0.9rem;
  }
  .user_top_m_serve{
    font-size: 0.8rem;
    color: #888888;
    margin-right: 0.5rem;
  }
  .user_top_m_review{
    font-size: 0.8rem;
    color: #888888;
  }
  .user_top_r{
    /*width: 6rem;*/
    text-align: right;
  }
  .user_top_r_score,.user_top_r_grade{
    font-size: 0.85rem;
    color: #595757;
    margin-bottom: 0.4rem;
  }
  .user_top_r_car{
    font-size: 0.85rem;
    color: #595757;
  }
  /*统计*/
  .user_count{
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .user_count_tit{
    text-align: left;
    height: 2rem;
    line-height: 2rem;
    padding-left: 1rem;
    border-bottom: 1px solid #B3B3B4;
    font-size: 0.95rem;
  }
  .user_count_main{
    padding: 1rem 0;
  }
  .user_count_main li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .user_count_number{
    font-size: 2rem;
  }
  .user_count_numberAll{
    color: #2ECC80;
  }
  .user_count_subtit{
    font-size: 0.8rem;
    color: #595757;
  }
  /*我的收入*/
  .user_income{
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .user_income_tit{
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    padding: 0 1rem;
    height: 2rem;
    line-height: 2rem;
  }
  .user_income_tit button{
    border: 1px solid #b3b3b4;
    background-color: transparent;
    padding: 0.1rem 0.5rem;
    border-radius: 0.3rem;
  }
  .user_income_main{
    background: -webkit-linear-gradient(left, #2ecc80 , #00D4CB); 
    background: -o-linear-gradient(right, #2ecc80 , #00D4CB); 
    background: -moz-linear-gradient(right, #2ecc80 , #00D4CB); 
    background: linear-gradient(to right, #2ecc80 , #00D4CB); 
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
  }
  .user_income_info{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .user_income_info li{
    border-right: 1px solid #96D6F4;
    color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .user_income_subtit{
    font-size: 0.9rem;
    line-height: 1.8rem;
  }
  .user_income_number{
    font-size: 0.9rem;
    line-height: 1.8rem;
  }
  .user_income_withdraw{
    border: 1px solid #fff;
    background-color: transparent;
    border-radius: 0.3rem;
    margin: 0 0.5rem;
    color: #fff;
    font-size: 0.95rem;
    width: 3.5rem;
    height: 2.3rem;
    line-height: 2.3rem;
  }
  /*list内容*/
  .user_list{
    /*padding: 0 0.5rem;*/
    margin-bottom: 5rem;
  }
  .user_list li {
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    border-bottom: 1px solid #B3B3B4;
    padding: 0 0.5rem;
    height: 3rem;
    line-height: 3rem;
  }
  .user_list_l{

  }
  .user_list_r{
    color: #595757;
  }
  /*底部导航*/
  .tab{
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
  }
  .tab_main{
    border-top: 1px solid #797979;
    box-sizing: border-box;
    padding: 0.25rem 0 0;
  }
  .tab_main .active{
    color: #2ECC80;
  }
  .tab_li{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #B5B5B5;
  }
  .tab_li p{
    font-size: 0.9rem;
  }
  .icontab{
    font-size: 1.5rem;
  }
</style>
<style>
  button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .flex_1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
</style>